<script lang="js">
import { useLockFn } from '@/composables/useLockFn'
import { ElButton } from 'element-plus'
import { computed, defineComponent, h, toValue } from 'vue'

export default defineComponent({
    inheritAttrs: false,
    props: {
        lock: {
            type: Boolean,
            default: false
        },
        lockDelay: {
            type: Number,
            default: 300
        },
        onClick: {
            type: Function,
            default: () => {}
        }
    },
    setup (props, { attrs, slots }) {
        const _onClick = props.lock ? useLockFn(props.onClick, props.lockDelay) : props.onClick

        const _loading = computed(() => {
            if (props.lock) {
                return toValue(_onClick.lock)
            } else {
                return attrs.loading
            }
        })
        return () => {
            return h(ElButton, { onClick: _onClick, loading: _loading.value, ...attrs }, slots)
        }
    }
})

</script>

<style lang="scss" scoped>

</style>